<template>
	<view>
		<view class="header">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<view class='cuIcon-search'></view>
				<input v-model="inputText" confirm-type="search" @confirm="onInputAufnr" focus="" class="input" type="text" autofocus="autofocus" />
				 <view class='cuIcon-close' @tap.stop="delAufnr"></view>
			</view>
			<!-- <image style="width: 40rpx;" src="../../static/icon/shaixuan.png" mode="widthFix" @tap="dropDown"></image> -->
		</view>
		<form id="root" @submit="formSubmit">
			<view class="title">
				<view class="num">工序编码</view>

				<view class="name">工序名称</view>
			</view>
			<view>
				<view class="uni-list">
					<radio-group class="radio-group" @change="radioChange(item)" v-for="(item,index) in gongxuList" :key="index">
						<label  class="contentd">
							<view class="kuang">
								<radio :value="item.operationCode" :checked="item.checked" />
							</view>
							<view class="num-value">{{item.operationCode}}</view>
							<view class="name-value">{{item.operationName}}</view>
						</label>
					</radio-group>
				</view>

			</view>
				<button class="fott" form-type="submit">确定</button>

		</form>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'bg-green',
				gongxuList: [],
				gongxuPickerList: ['请选择'],
				indexGongxu:'',
				order:{},
				inputText:"",
				operationName:'',
				operationCode:'',
			}
		},
		onShow() {
			this.getGongxuList()
		},
		methods: {
			getGongxuList() {
				let url = '/dcloud/mcOperation/mcOperation/list2'
				this.$http.get(url, {
					params: {
						pageSize: 30,
						confirmFlag: 1
					}
				}).then(res => {
					if (res.data.success) {
						this.gongxuList = [];
						let operationCode = uni.getStorageSync("operationCode");
						let i = 0;
						res.data.result.records.forEach(item => {
							this.gongxuPickerList.push(item.operationName)
							item.checked = false;
							this.gongxuList.push(item)
							i++
							if (operationCode !== null & operationCode == item.operationCode) {
								this.indexGongxu = i;
							}
						})

					}
				}).catch(err => {
					console.log(err);
				});

			},
			onInputAufnr(e) {
				let url = '/dcloud/mcOperation/mcOperation/searchOperation'
				this.operationCode = this.inputText
				this.operationName = this.inputText
				this.$http.get(url, {
					params: {
						confirmFlag: 1,
						pageSize: 30,
						operationCode: this.operationCode,
						operationName: this.operationName,
					}
				}).then(res => {
					if (res.data.success) {
						this.gongxuList = [];
						let operationCode = uni.getStorageSync("operationCode");
						let i = 0;
						res.data.result.records.forEach(item => {
							this.gongxuPickerList.push(item.operationName)
							item.checked = false;
							this.gongxuList.push(item)
							i++
							if (operationCode !== null & operationCode == item.operationCode) {
								this.indexGongxu = i;
							}
						})

					}
				}).catch(err => {
					console.log(err);
				});
			},
			delAufnr(){
				this.inputText = ''
			},
			radioChange: function(e) {

				 const items = this.gongxuList
				 // console.log(this.gongxuList,e)
				    for (let i = 0, len = items.length; i < len; i++) {
				      items[i].checked = items[i].id === e.id
					  if(items[i].id === e.id){
						  this.order = items[i];
					  }
				    }
				this.gongxuList = items;

			},
			formSubmit:function(e){//返回上一层
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.order = this.order;
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	.uni-list-cell {
		justify-content: flex-start
	}
	.uni-list {
	}
	.title {
		display: flex;
		flex-direction: row;
		width: 100%;
		background-color: #FFFFFF;
		height: 100rpx;
		font-size: 28px;
	}

	.contentd {
		display: flex;
		flex-direction: row
	}

	.num {
		width: 40%;
		text-align: center;
		line-height: 100rpx;
		margin-left: 150rpx;
	}

	.name {
		width: 40%;
		line-height: 100rpx;
		text-align: center;
	}

	.num-value {
		width: 20%;
		text-align: center;
		margin-left: 40rpx;
		line-height: 100rpx;

	}

	.name-value {
		width: 20%;
		margin-left: 140rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.kuang {
		width: 20%;
		margin-left: 50rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.fott {
		  border-radius:0;
		  position: fixed;
		  bottom: 0;
		  display: flex;
		  width: 100%;
		  justify-content: center;
	}
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		/* background-color: #b6bbc3; */
		background-image: linear-gradient(#34A4DF, #34A4DF, #2bace7);
	}
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #fff;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}
	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #000;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}
</style>
